<template> 
    <el-card class="form-container" shadow="never">
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="分类名称：" prop="name">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="上级分类：">
                <el-select v-model="form.parentId" placeholder="请选择分类">
                    <el-option
                            v-for="item in selectProductCateList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="展示图">
                <el-upload
                        class="avatar-uploader"
                        :headers="myHeaders"
                        :action="uploadsrc"
                        accept="image/jpeg,image/gif,image/png"
                        list-type="picture-card"
                        :limit="1"
                        :before-upload="handleBeforeUpload"
                        :on-success="uploadLogoSuccess"
                        :on-error="uploadError"
                        :data="pdfData"
                        :file-list="logolist">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar" v-model="form.icon">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="排序：">
                <el-input v-model="form.sort"></el-input>
            </el-form-item>
            <el-form-item label="是否显示：">
                <el-radio-group v-model="form.showStatus">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="是否显示在导航栏：">
                <el-radio-group v-model="form.navStatus">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="关键词：">
                <el-input v-model="form.keywords"></el-input>
            </el-form-item>
            <el-form-item label="分类描述：">
                <el-input type="textarea" :autosize="true" v-model="form.description"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">提交</el-button>
                <el-button @click="cancel">取消</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>
<script>
    import { uploadsrc } from '../../../utils/dcf2d0812e764796a97bb2e8c1725fab.js';
    import { dynamicHeader } from '../../../utils/dcf2d0812e764796a97bb2e8c1725fab.js';

    const util = require('../../../utils/util');
    export default {
        props: {
            isEdit: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                query: {
                    pageNum: 1,
                    pageSize: 10,
                    param: {
                        parentId:0
                    }
                },
                imageUrl: '',

                myHeaders: {},
                logolist: [],
                pdfData: {
                    type: 1,
                    path: 1
                },
                selectProductCateList: [],
                form: {},
            }
        },
        created() {
            this.uploadsrc = uploadsrc;
            this.getSelectProductCateList();
        },
        methods: {
            uploadError(data) {
                this.$message.success(`上传失败，请重新上传`);
            },
            uploadLogoSuccess(data) {
                if (data.returnCode == 200) {
                    this.form.icon = data.data;
                } else {
                    this.$message.success(`上传失败，请重新上传`);
                }
            },
            handleBeforeUpload(file) {
                this.handleimgtype(file);
                this.getmyHeaders();
            },
            handleimgtype(file) {
                if (!(file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/jpg' || file.type === 'image/jpeg')) {
                    this.$notify.warning({
                        title: '警告',
                        message: '请上传格式为image/png, image/gif, image/jpg, image/jpeg的图片'
                    });
                    return false;
                }
                let size = file.size / 1024 / 1024 / 2;
                if (size > 2) {
                    this.$notify.warning({
                        title: '警告',
                        message: '图片大小必须小于2M'
                    });
                    return false;
                }
            },
            getmyHeaders() {
                var dHeader = dynamicHeader();
                this.myHeaders.signature = dHeader.signature;
                this.myHeaders.nonce = dHeader.nonce;
                this.myHeaders.timestamp = dHeader.timestamp;
                this.myHeaders.appkey = dHeader.appkey;
                this.myHeaders.token = dHeader.token;
            },

            getSelectProductCateList() {
                categoryList(this.query).then(response => {
                    this.selectProductCateList = response.data.list;
                    this.selectProductCateList.unshift({id: 0, name: '无上级分类'});
                });
            },
            onSubmit() {
                if(this.form.parentId!=0){
                    this.form.level=1;
                }
                categoryAdd(this.form).then(res => {
                    if (res.returnCode == 200) {
                        layer.alert('添加分类成功', function() {
                            parent.layer.close(parent.layer.getFrameIndex(window.name));
                        });
                    }
                });
            },
            cancel() {
                parent.layer.close(parent.layer.getFrameIndex(window.name));
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
                this.brand = Object.assign({},defaultBrand);
            }
        }
    }
</script>
<style>
</style>


